<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div class="container">
      <!-- 控件容器 -->
      <div class="search">
        <!-- 表头搜索控件 -->
        <div class="input" style="width: 25%">
          <el-input placeholder="搜索关键词" v-model="keywords" clearable>
          </el-input>
        </div>
        <div class="input" style="width: 15%">
          <el-input placeholder="设备编号" v-model="args.GasId" clearable>
          </el-input>
        </div>

        <div class="input" style="width: 15%">
          <el-input placeholder="使用单位" v-model="args.SydwName" clearable>
          </el-input>
        </div>
        <div class="input" style="width: 10%">
          <el-button type="primary" style="width: 100%">查询</el-button>
        </div>
        <div class="input" style="width: 10%">
          <el-button style="width: 100%">重置</el-button>
        </div>
        <div class="input" style="width: 10%; margin-left: 8.5%">
          <el-button type="text">高级筛选</el-button>
        </div>
      </div>
      <div class="btns">
        <!-- 按钮 -->
        <div class="input">
          <el-button type="primary" style="width: 100%">添加</el-button>
        </div>
        <div class="input">
          <el-button type="primary" style="width: 100%">导入</el-button>
        </div>
        <div class="input">
          <el-button type="primary" style="width: 100%">导出</el-button>
        </div>
        <div class="input">
          <el-button type="primary" style="width: 100%">删除</el-button>
        </div>
      </div>
      <div class="table">
        <!-- 表格容器 -->
        <div class="container">
          <el-table
            v-loading="loading"
            :data="tableData"
            max-height="600"
            style="background-color: rgba(34, 34, 34, 0.5)"
          >
            <el-table-column fixed prop="Id" label="序号" width="120">
            </el-table-column>
            <el-table-column prop="GasSerialId" label="设备编号">
            </el-table-column>
            <el-table-column prop="GasType" label="设备类型" width="200">
            </el-table-column>
            <el-table-column prop="Media" label="充装介质" width="150">
            </el-table-column>
            <el-table-column prop="SydwName" label="使用单位" width="350">
            </el-table-column>
            <el-table-column prop="UseData" label="使用登记数据" width="120">
            </el-table-column>
            <el-table-column prop="CheckData" label="定检数据" width="120">
            </el-table-column>
            <el-table-column prop="AddData" label="充装数据" width="120">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="pageSizeChange"
            @current-change="pageChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="args.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- <div class="map1"><img src="../../../../assets/image/lbx.png" /></div>
      <div class="map2"><img src="../../../../assets/image/jt.png" /></div>
      <div class="map3"><img src="../../../../assets/image/map.png" /></div> -->
    </div>
  </el-card>
</template>
<script>
import {
  DataCloudSearchArgs,
  serachDataCloudList,
} from "../../../../api/qiping/data-cloud";
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
export default {
  name: "QipingDataCloud",
  data() {
    return {
      args: new DataCloudSearchArgs(),
      keywords: "",
      tableData: [],
      total: 0,
      currentPage: 1,
      naviBasicItems: [
        { text: "气瓶" },
        { text: "数据上云", to: "/qiping/dataToCloud" },
      ],
      naviItems: [],
      loading: false,
    };
  },
  components: {
    Breadcrumb,
  },
  created() {
    (this.args.SydwName = null),
      (this.args.GasId = null),
      (this.args.offset = 0),
      (this.args.num = 10),
      (this.naviItems = [...this.naviBasicItems]);
    this.searchData();
  },
  methods: {
    getRowClass({ row, column, rowIndex, columnIndex }) {
      console.log("调用行样式");
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    // 向后端发请求获得数据
    async searchData() {
      this.loading = true;
      const res = await serachDataCloudList(this.args);
      // if(res.data!=null){
      //   this.$message({
      //     message: '数据获取成功',
      //     type: 'success',
      //     offset:100,
      //   });
      // }
      this.loading = false;
      // console.log(res)
      const { list, total } = res.data;
      this.total = total;
      // 填充登记数据，定检数据，重装数据三列
      list.map((item) => {
        if (item.SydwName != "" || item.SydwName != null) {
          item.UseData = "1份";
        }
        if (item.CheckDate != "" || item.CheckDate != null) {
          item.CheckData = "1份";
        }
        if (item.AddDate != "" || item.AddDate != null) {
          item.AddData = "1份";
        }
      });
      this.tableData = list;
    },
    // 页面大小改变
    async pageSizeChange(pageSize) {
      this.args.num = pageSize;
      this.args.offset = 0;
      this.searchData();
    },
    // 页数改变
    async pageChange(page) {
      console.log("现在是第 ", this.currentPage, " 页");
      this.args.offset = (page - 1) * this.args.num;
      this.currentPage = page;
      this.searchData();
    },
  },
};
</script>
<style lang="less" scoped>
div.box-card{
  // background-image: url("../../../../assets/bg.jpg");
}
div.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  div.search {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.btns {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.table {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    z-index: 5;
    div.container {
      width: 95.5%;
      position: relative;
      left: -15px;
    }
  }
  div.page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 70px;
    z-index: 5;

  }
  .map1,
  .map2,
  .map3 {
    position: absolute;
    opacity: 0.5;
  }
  .map1 {
    margin-left: 580px;
    margin-top: 230px;
    z-index: 2;
    animation: myfirst2 15s infinite linear;
  }
  .map2 {
    margin-left: 625px;
    margin-top: 275px;
    z-index: 3;
    opacity: 0.2;
    animation: myfirst 10s infinite linear;
  }
  .map3 {
    margin-left: 650px;
    margin-top: 300px;
    z-index: 1;
  }
  .map1,
  .map2,
  .map3 {
    top: 40px;
  }
  @keyframes myfirst2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  @keyframes myfirst {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-359deg);
    }
  }
}
</style>